<template>
	<div style="position: relative;">

		<div class="one">

			<div class="header">
				<span>库房列表</span>
			</div>


			<div>

				<!-- <div class="item" v-for='spu in spu_select_list' v-on:click="ch_one(spu.id, spu.spu_name)"
					:class="[spu_id === spu.id?'active': '']"  :id="spu.id" style="color: #0000FF;">
					<span>{{spu.spu_name}}</span>
				</div> -->

				<div class="item" v-for='warehouse in warehouse_list'
					v-on:click="ch_one(warehouse.id, warehouse.warehouse_name)"
					:class="[warehouse_id === warehouse.id?'active': '']" :id="warehouse.id">
					<span>{{warehouse.warehouse_name}}</span>
				</div>

			</div>

			<div style="height: 66px;"></div>

		</div>

		<div class="two">

			<div class="header" @click="drawer_two = true">
				<span>库房货位 <i class="el-icon-circle-plus"></i></span>

			</div>

			<!-- 下拉弹框 -->
			<el-drawer size="80%" title="新增货位" :visible.sync="drawer_two" :direction="direction">
				<div style="margin-left: 20px; font-weight: 800;">库房名称:{{warehouse_name}}</div>
				<el-input style="padding: 10px;" v-model="location_name" placeholder="请输入新增货位名称"></el-input>
				<!-- <el-input style="padding: 10px;" v-model="attribute_value" placeholder="请输入新增属性值"></el-input> -->
				<el-button type="primary" v-on:click='add_storage_location(location_name)'
					style="display: block; width: 80%; margin: 10px auto;">
					保存属性</el-button>
			</el-drawer>

			<div>
				<div class="item" v-for='location in storage_location_list'>
					<span>{{location.location_name}}</span>
				</div>
			</div>

			<div style="height: 66px;"></div>


		</div>



	</div>
</template>

<script>
	import {
		select_all_warehouse_url,
		select_warehouse_location_url,
		add_storage_location_url
	} from "../../utils/setting.js"
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				warehouse_list: [],
				storage_location_list: [],
				location_name: '',

				warehouse_id: [],
				warehouse_name: '',

				spu_select_list: [],
				spu_attribute_list: [],
				spu_id: '',
				spu_name: '',
				direction: 'ttb',
				drawer_one: false,
				drawer_two: false,
				new_one: '',
				attribute_key: '',
				attribute_value: '',
			}
		},
		methods: {

			add_storage_location(location_name) {
				this.$axios({
					method: 'GET',
					url: add_storage_location_url,
					params: {
						warehouse_id: this.warehouse_id,
						location_name: location_name
					}
				}).then((response) => { //这里使用了ES6的语法
					if (response.data.status == -1) {
						this.$message({
							message: response.data.errorMsg,
							type: 'error'
						})
						return
					}

					this.$message({
						message: '属性添加成功',
						type: 'success'
					})

					this.get_warehouse_location()

				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			ch_one(warehouse_id, warehouse_name) {

				if (this.warehouse_id == warehouse_id) {

					return
				}

				this.warehouse_id = warehouse_id
				this.warehouse_name = warehouse_name

				this.$axios({
					method: 'GET',
					url: select_warehouse_location_url,
					params: {
						warehouse_id: this.warehouse_id
					}
				}).then((response) => { //这里使用了ES6的语法

					this.storage_location_list = response.data.resultBody.reverse()
				}).catch((error) => {

					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			get_all_warehouse() {

				this.$axios({
					method: 'GET',
					url: select_all_warehouse_url,
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					this.warehouse_list = response.data.resultBody.reverse()
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})

			},

			get_warehouse_location() {
				this.$axios({
					method: 'GET',
					url: select_warehouse_location_url,
					params: {
						warehouse_id: this.warehouse_id
					}
				}).then((response) => { //这里使用了ES6的语法
					console.log(response) //请求成功返回的数据
					this.storage_location_list = response.data.resultBody.reverse()
				}).catch((error) => {
					// console.log(error) //请求失败返回的数据
					this.$message({
						message: '请联系管理员' + '!!!',
						type: 'error'
					})
				})
			}


		},
		computed: {},
		watch: {},
		created() {},
		mounted() {
			this.get_all_warehouse()
		},
	}
</script>

<style scoped lang="less">
	.one,
	.two {
		width: 50%-0.5px;
		display: inline-block;
	}

	.one {
		// border-right: 0.5px solid black;
		position: absolute;
		left: 0px;
		top: 0px;
	}

	.two {
		// border-left: 0.5px solid black;
		position: absolute;
		right: 0px;
		top: 0px;
	}


	.header {
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size: 20px;
		background-color: floralwhite;
	}

	.item {
		position: relative;
		height: 40px;
		line-height: 40px;
		font-size: 20px;
		// background-color: #F0F0F0;
		border-bottom: 0.5px solid #F0F0F0;

		span {
			padding-left: 10px;
		}

		i {
			position: absolute;
			display: block;
			right: 15px;
			top: 10px;
			color: orangered;
		}

	}

	.active {
		background-color: orange;
		color: white;
	}
</style>
